import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Text, StyleSheet } from 'react-native';
import TouchableView from './touchableView';
import _ from 'lodash'

/**
 * tag: 按钮类型 默认正常 蓝色字体颜色
 * fontStyle： 字体样式
 * disabledFontStyle : 不可点击时字体样式
 * contentStyle ： 按钮样式
 * disabledContentStyle ：不可点击时按钮样式
 * disabled：可不可以点击
 * onPress: 点击回调
 */
export default class Button extends Component {
    static propTypes = {
        tag: PropTypes.string,
        disabled: PropTypes.bool,
        onPress: PropTypes.func,
        fontStyle: PropTypes.any,
        disabledFontStyle: PropTypes.any,
        contentStyle: PropTypes.any,
        children: PropTypes.any,
        disabledContentStyle: PropTypes.any,
        icon: PropTypes.any,
        label: PropTypes.object,
        noET: PropTypes.bool
    };
    static defaultProps = {
        disabled: false,
        tag: '',
        onPress: () => {},
        noET: true
    };
    shouldComponentUpdate(nextProps, nextState) {
        return !(_.isEqual(this.props, nextProps) && _.isEqual(this.state, nextState));
    }
    render() {
        const { tag } = this.props;
        return (
            <TouchableView
                label={this.props.label}
                onPress={this.props.onPress}
                disabled={this.props.disabled}
                style={[
                    styles.content,
                    styles['btn_' + tag],
                    this.props.contentStyle,
                    this.props.disabled ? this.props.disabledContentStyle : {}
                ]}
                // noET={this.props.noET}
            >
                {this.props.icon ? this.props.icon : null}
                <Text
                    style={[
                        styles.text,
                        styles['font_' + tag],
                        this.props.fontStyle,
                        this.props.disabled ? this.props.disabledFontStyle : {}
                    ]}
                >
                    {this.props.children}
                </Text>
            </TouchableView>
        );
    }
}

const styles = StyleSheet.create({
    content: {
        height: 50,
        borderRadius: 6,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#0AB0ED'
    },
    text: {
        backgroundColor: 'transparent',
        color: '#ffffff',
        fontSize: 17
    },
    btn_confirm: {
        backgroundColor: 'transparent'
    },
    font_confirm: {
        color: '#007aff'
    },
    btn_cancel: {
        backgroundColor: 'transparent'
    },
    font_cancel: {
        color: '#999999'
    }
});

/**
 * 用法
 <Button
 // 按钮样式
 contentStyle={{backgroundColor: '#ffffff'}}
 // 不可点击按钮样式
 disabledContentStyle={}
 // 字体样式
 fontStyle={{fontSize: 17, color: '#48c4ed'}}
 // 不可点击字体样式
 disabledFontStyle={}
 // 是否不可点击
 disabled={false}
 // 点击回调
 onPress={this.loginHandle}
 >登 录</Button>

 **/
